<template>
  <div class="common-layout">
    <el-container class="full-height">
      <!-- 头部 -->      <el-header class="header">
        <div class="header-left">
          <el-icon :size="40" color="#ffffff"><HomeFilled /></el-icon>
          <h1>智慧农业大棚后台管理系统</h1>
        </div>
        <div class="header-right">
          <el-button type="warning" plain>登录</el-button>
          <el-button type="danger" plain><router-link to="/login">退出</router-link></el-button>
        </div>
      </el-header>

      <!-- 主体部分 -->
      <el-container class="full-height">
        <!-- 侧边栏 -->
        <el-aside width="200px" class="aside">
          <el-menu :default-openeds="['1','2']" router>
            <el-sub-menu index="1">
              <template #title>
                <i class="el-icon-user"></i>
                <span><el-icon><User /></el-icon>用户管理</span>
              </template>
              <el-menu-item><router-link to="/user/list">用户列表</router-link></el-menu-item>
              <el-menu-item><router-link to="/user/addUser">添加用户</router-link></el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <i class="el-icon-monitor"></i>
                <span><el-icon><Tools/></el-icon>设备管理</span>
              </template>
              <el-menu-item><router-link to="/device/list">所有设备</router-link></el-menu-item>
              <el-menu-item><router-link to="/device/add">添加设备</router-link></el-menu-item>
              <el-menu-item><router-link to="/device/realData">设备实时数据</router-link></el-menu-item>
              <el-menu-item><router-link to="/device/controlDevice">控制设备</router-link></el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <!-- 主体内容 -->
        <el-main class="main">
          <router-view></router-view> <!-- 这里会显示嵌套路由的内容 -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { HomeFilled, User, Tools } from '@element-plus/icons-vue';
</script>

<style>
/* 全屏布局 */
.common-layout, .full-height {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 头部样式 */
.el-header.header {
  background-color: #b0e2ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px; /* 明确设置头部高度 */
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left h1 {
  margin-left: 10px;
  color: white;
}

.header-right {
  display: flex;
  gap: 10px;
}

/* 侧边栏样式 */
.el-aside.aside {
  background-color: #e6f7ff;
  height: 100%;
}

/* 主体内容样式 */
.el-main.main {
  background-color: #f0f2f5;
  padding: 0; /* 移除内边距 */
  width: 100%; /* 确保宽度为 100% */
  height: 100%; 
  overflow: auto;
}

.el-menu-item a {
  color: inherit;
  text-decoration: none;
}
.el-button a{
  color: inherit;
  text-decoration: none;
}
</style>